<!--
 * @Description: file content
 * @Author: Wenmin He
 * @Date: 2021-07-02 13:40:04
 * @LastEditors: luojie
 * @LastEditTime: 2021-08-01 15:39:20
-->
<template>
	<view class="content">
		<view class='person-info-bg'></view>
		<view class="person-info">
			<open-data type="userAvatarUrl" class="person-info-img"></open-data>
			<!-- <view class="person-info-img">
				<image class="person-info-img-src" :src="avatarUrl" mode="widthFix"></image>
			</view> -->
			<view class="person-info-name" >{{personalInfo.name}}</view>
			<!-- <view class="record-right" >
				<image class="record-right-img"  src="https://szgd-dev.tgovcloud.com/public/images/arr-right.png" mode="widthFix"></image>
			</view> -->
		</view>
		<view class="detail">
			<view class="item">
				<view class="detail-img" >
					<image class="detail-img-show"  src="https://szgd-dev.tgovcloud.com/public/images/icon-hotel.png" mode="widthFix"></image>
				</view>
				<view class="label" >酒店</view>
				<view class="value" >{{hotelName}}</view>
			</view>
			<view class="item">
				<view class="detail-img" >
					<image class="detail-img-show"  src="https://szgd-dev.tgovcloud.com/public/images/icon-role.png" mode="widthFix"></image>
				</view>
				<view class="label" >角色</view>
				<view class="value" >{{personalInfo.roles[0]}}</view>
			</view>
			<view class="item">
				<view class="detail-img" >
					<image class="detail-img-show"  src="https://szgd-dev.tgovcloud.com/public/images/icon-power.png" mode="widthFix"></image>
				</view>
				<view class="label" >权限</view>
				<view class="value" >{{permissionTexts?permissionTexts:'-'}}</view>
			</view>
			<view class="item" style="border-bottom:0">
				<view class="detail-img" >
					<image class="detail-img-show"  src="https://szgd-dev.tgovcloud.com/public/images/icon-post.png" mode="widthFix"></image>
				</view>
				<view class="label" >岗位</view>
				<view class="value" >{{personalInfo.jobs[0]}}</view>
			</view>
		</view>
	</view>
</template>

<script>
// import func from 'vue-editor-bridge'
	export default {
		data() {
			return {
				personalInfo:[],
				avatarUrl:'',
				hotelName:'',
				permissionTexts:'', // 权限描述文字
				navList:[
					{
						icon:'https://szgd-dev.tgovcloud.com/public/images/check-out.png',
						title:'离点登记' ,
						type: 'checkOut'
					},{
						icon:'https://szgd-dev.tgovcloud.com/public/images/medical.png',
						title:'医学观察',
						type: 'medicalObservation'
					},{
						icon:'https://szgd-dev.tgovcloud.com/public/images/health.png',
						title:'健康评估',
						type: 'healthInspect'
					},
					{
						icon:'https://szgd-dev.tgovcloud.com/public/images/check-in.png',
						title:'入住登记',
						type: 'checkIn'
					}
				],
			}
		},
		onLoad() {
			let personalInfo = uni.getStorageSync('personalInfo');
			this.personalInfo = personalInfo;
			this.hotelName = uni.getStorageSync('hotelName');

			let authorities = uni.getStorageSync('personalInfo').authorities;

			let texts = [];

			if(authorities){
				authorities.forEach( item=> {
					texts.push(item.name)
				})
			}
			if(texts.length>0){
				this.permissionTexts = texts.join('、');
			}
			//获取用户头像
			let avatarUrl =uni.getStorageSync('avatarUrl');
			if(avatarUrl !='' && avatarUrl !=undefined){
				this.avatarUrl = avatarUrl;
			}else{
				this.avatarUrl = 'https://szgd-dev.tgovcloud.com/public/images/img-person.png'
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width:100%;
		height: 100vh;
		box-sizing: border-box;
		background-color: #f2f2f2;
	}
	.person-info-bg{
		background: #1394F5;
		height: 81rpx;
		width: 100%;
		position: absolute;
	}
	.person-info{
		width: 100%;
		background-color: #fff;
		height: 200rpx;
		line-height: 200rpx;
		padding-left:40rpx;
		padding-right: 40rpx;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		position:relative;
		&-img{
			width: 120rpx;
			height: 120rpx;
			overflow: hidden;
			border-radius: 120rpx;
			display: inline-block;
			vertical-align: middle;
			margin-right:40rpx;
			&-src{
				width:100%;
			}
		}
		&-name{
			font-weight: 600;
			font-size: 40rpx;
			vertical-align: middle;
		}
	}
	.record{
		margin-top:40rpx;
		background-color: #fff;
		text-align: center;
		padding:20rpx;
		line-height: 80rpx;
		display: flex;
		align-items: center;
		&-title{

		}
		&-right{
			flex: 1;
			line-height: 80rpx;
			text-align: right;
			&-img{
				width:20rpx;
			}
		}
	}
	.detail{
		margin-top:20rpx;
		background-color: #fff;
		padding:0 32rpx;
		.item{
			display: flex;
			padding: 34rpx 0;
			font-size: 36rpx;
			border-bottom: 1px solid #D0D0D0;
			align-items: center;
			&:last-child{
				border-bottom: 0;
			}
		}
		.label{
			width: 100rpx;
			color: #999999;
			margin-right: 28rpx;
		}
		.value{
			width: 90%;
		}
		&-list{
			padding:24rpx 0;
			border-bottom: 1px solid #d0d0d0;
			display: flex;
			font-size: 36rpx;
			&:last-child{
				border-bottom: 0;
			}
		}
		&-title{
			color:#999999;
			padding:0 20rpx;
		}
		&-img{
			&-show{
				width:40rpx;
				height: 40rpx;
				margin-right: 24rpx;
			}
		}
	}
</style>>
